<template>
  <div class="center">
    <body-menu></body-menu>
    <!-- <router-view/> -->
    <div class="center-tab-wrapper">
      <div class="center-tab">
        <el-tag
          class="smart-tab"
          v-for="tag in tags"
          :key="tag.name"
          closable
          @close="handleClose(tag)"
          :type="tag.type">
          <router-link :to="tag.link">{{tag.name}}</router-link>
        </el-tag>
      </div>
      <div class="center-container"><router-view/></div>
    </div>
  </div>
</template>

<script>
import BodyMenu from './BodyMenu.vue'
export default {
  name: 'BodyCenter',
  components:{
    BodyMenu
  },
  data (){
    return {
      tags: [
        { name: '标签一', type: '', link: '/' },
        { name: '标签二', type: '', link: '/about' },
        { name: '标签三', type: '', link: '/' },
        { name: '标签四', type: '', link: '/about' },
        { name: '标签五', type: '', link: '/' }
      ]
    }
  },
  methods: {
    handleClose (tag){
      this.tags.splice(this.tags.indexOf(tag), 1);
    }
  }
}
</script>
<style lang='stylus' scoped>
  .center
    display:flex
    flex:1
    .center-tab-wrapper
      flex:1
      display:flex
      flex-direction:column
      .center-container
        width:100%
        flex:1
      .center-tab
        display:flex
        background-color:#eee
  .smart-tab
    min-width:.8rem
    height: .34rem
    padding: 0 .2rem
    line-height: .34rem
    font-size: .14rem
</style>
